<template>
    <Row :gutter="24">
        <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" dis-hover :padding="12" class="ivu-bg">
                <p slot="title">
                    <span>新增患者</span>
                </p>
                <Tag slot="extra" color="green">日</Tag>
                <div>
                    <a><Numeral value="58" v-font="30" /></a>
                    <Divider style="margin: 8px 0" />
                    <div>
                        <Row>
                            <Col span="12">总患者数</Col>
                            <Col span="12" class="ivu-text-right">801</Col>
                        </Row>
                    </div>
                </div>
            </Card>
        </Col>
         <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" :padding="12">
                <p slot="title">
                    <span>已到</span>
                </p>
                <Tag slot="extra" color="red">周</Tag>
                <div>
                    <a><Numeral value="128" format="0,0" v-font="30" /></a>
                    <Divider style="margin: 8px 0" />
                    <div>
                        <Row>
                            <Col span="12">总已到人数</Col>
                            <Col span="12" class="ivu-text-right">1080 人</Col>
                        </Row>
                    </div>
                </div>
            </Card>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" :padding="12">
                <p slot="title">
                    <span>预到</span>
                </p>
                <Tag slot="extra" color="blue">周</Tag>
                <div>
                    <a><Numeral value="365" v-font="30" /></a>
                    <Divider style="margin: 8px 0" />
                    <div>
                        <Row>
                            <Col span="12">总预到人数</Col>
                            <Col span="12" class="ivu-text-right">365</Col>
                        </Row>
                    </div>
                </div>
            </Card>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" :padding="12">
                <p slot="title">
                    <span>过期未到</span>
                </p>
                <Tag slot="extra" color="blue">周</Tag>
                <div>
                    <a><Numeral value="365" v-font="30" /></a>
                    <Divider style="margin: 8px 0" />
                    <div>
                        <Row>
                            <Col span="12">总过期未到</Col>
                            <Col span="12" class="ivu-text-right">651</Col>
                        </Row>
                    </div>
                </div>
            </Card>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" :padding="12">
                <p slot="title">
                    <span>已回访次数</span>
                </p>
                <Tag slot="extra" color="blue">月</Tag>
                <div>
                    <a><Numeral value="365" v-font="30" /></a>
                    <Divider style="margin: 8px 0" />
                    <div>
                        <Row>
                            <Col span="12">总回访次数</Col>
                            <Col span="12" class="ivu-text-right">5365</Col>
                        </Row>
                    </div>
                </div>
            </Card>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" :padding="12">
                <p slot="title">
                    <span>过期未回访</span>
                </p>
                <Tag slot="extra" color="red">周</Tag>
                <div>
                    <a><Numeral value="168" v-font="30" /></a>
                    <Divider style="margin: 8px 0" />
                    <div>
                        <Row>
                            <Col span="12">总未回访数</Col>
                            <Col span="12" class="ivu-text-right">536</Col>
                        </Row>
                    </div>
                </div>
            </Card>
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                grid: {
                    xl: 4,
                    lg: 12,
                    md: 12,
                    sm: 12,
                    xs: 24
                },
                excessStyle: {
                    color: '#f56a00',
                    backgroundColor: '#fde3cf'
                }
            }
        }
    }
</script>
<style scoped>
.ivu-bg {
    background: #f8f8f9 !important;
}
</style>
